<script setup>
</script>

<template>
    <div class="dingdanquan">
        <div class="shangmian">
            <van-tag class="bianhao1">订单编号1231231231</van-tag>
            <van-tag class="bianhao">待付款</van-tag>
        </div>
        <van-card num="1" price="16.00" desc="克数:500克" title="新鲜水果清新柠檬"
            thumb="https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg">

            <template #tags>
            </template>
            <template #footer>
                <van-tag class="heji">合计:￥16.00</van-tag>
            </template>
        </van-card>
    </div>
</template>

<style scoped lang="scss">
:deep(.van-card__title) {
    margin-bottom: 1%;
    margin-top: 1%;
}

.dingdanquan {
    height: 220px;
    margin-top: 10px;
    border: 1px solid #F0F0F0;

}

.van-card {
    padding-bottom: .1 !important;
    border: 1px solid #F0F0F0;
}

.heji {
    // margin-top: 1%;
    color: #201a1a;
    background-color: #fff;
}

.van-card:not(:first-child) {
    margin-top: 0px !important;
}

.shangmian {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #F0F0F0;
    height: 40px;

    .bianhao {
        color: red;
        background-color: #fff;
        margin-left: 4%;
    }

    .bianhao1 {
        color: #201a1a;
        background-color: #fff;

    }
}
</style>